<template>
    <h2>标题</h2>
    <h3>{{ person.name }}</h3>
    <h3>{{ person.age }}</h3>
    <button @click="person.name+='~'">name+</button>
    <br>
    <button @click="person.age++">age+</button>
  </template>
  
  <script>
    import{reactive,watchEffect} from 'vue'
    export default {
        name: "WtachEffectDemo",
        components: {},
        setup() {
        let person=reactive({name:'张三',age:18,a:{b:{c:"2001"}}})
        //   watch(person,(newVal,oldVal)=>{
        //     console.log('person old:',oldVal,'new:',newVal)
        //   })
        //用到了,就进入这里
        watchEffect(()=>{
            const x =person.name
            const y =person.age
            console.log(x,y)
        })
        return {
            person
        };
        },
    };
  </script>
  
  <style>
  </style>
  